<template>
  <div>
    <el-card>
      <div slot="header" style="font-size: 20px; font-weight: 600">
        UP主管理
      </div>

      <el-tabs type="border-card" @tab-click="handleTabsClick">
        <el-tab-pane label="申请管理">
          <div>
            <el-form :model="queryInfo" label-width="80px" inline>
              <el-form-item label="用户邮箱" :label-width="formLabelWidth">
                <div class="block">
                  <el-input
                    style="width: 400px"
                    placeholder="请输入用户邮箱"
                    v-model="queryInfo.username"
                    @change="searchPublisherApplying($event)"
                  >
                    <template
                      slot="suffix"
                      class="suffix_input"
                      style="padding-right: 20px; font-size: 20px"
                      >@lunangangster.store</template
                    >
                  </el-input>
                </div>
              </el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="searchPublisherApplying()"
                id="queryBtn"
              >
                查询
              </el-button>
            </el-form>
          </div>
          <el-table
            :default-sort="{ prop: 'ackTime', order: 'ascending' }"
            fit
            :data="userList"
            border
            stripe
            v-loading="tableLoading"
            element-loading-text="正在加载用户列表..."
          >
            <el-table-column label="序号" align="center" width="50px">
              <template scope="scope">
                <span>{{
                  (currentPage - 1) * currentPageSize + scope.$index + 1
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="500px"
              align="center"
              label="用户名"
              prop="username"
            ></el-table-column>
            <el-table-column
              width="400px"
              align="center"
              label="申请时间"
              prop="ackTime"
            ></el-table-column>

            <el-table-column align="center" label="操作" min-width="200px">
              <template slot-scope="scope">
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <!-- 编辑按钮 -->
                  <div>
                    <el-button
                      type="primary"
                      size="mini"
                      :disabled="scope.row.level == 0"
                      @click="
                        editDialogFlag = true;
                        currentRow = scope.row;
                      "
                    >
                      审核
                    </el-button>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="pagination_wrapper" style="margin-top: 20px">
            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="currentPage"
              :page-sizes="[1, 5, 10, 20]"
              :page-size="currentPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total1"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="UP主管理">
          <div>
            <el-form :model="queryInfo" label-width="80px" inline>
              <el-form-item label="用户邮箱" :label-width="formLabelWidth">
                <div class="block">
                  <el-input
                    style="width: 400px"
                    placeholder="请输入用户邮箱"
                    v-model="queryInfo.username"
                    @change="searchPublisherApplied($event)"
                  >
                    <template
                      slot="suffix"
                      class="suffix_input"
                      style="padding-right: 20px; font-size: 20px"
                      >@lunangangster.store</template
                    >
                  </el-input>
                </div>
              </el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="searchPublisherApplied()"
                id="queryBtn"
              >
                查询
              </el-button>
            </el-form>
          </div>
          <el-table
            :default-sort="{ prop: 'auditTime', order: 'ascending' }"
            fit
            :data="uperList"
            border
            stripe
            v-loading="tableLoading"
            element-loading-text="正在加载用户列表..."
          >
            <el-table-column label="序号" align="center" width="50px">
              <template scope="scope">
                <span>{{
                  (currentPage - 1) * currentPageSize + scope.$index + 1
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="400px"
              align="center"
              label="用户名"
              prop="username"
            ></el-table-column>
            <el-table-column
              width="280px"
              align="center"
              label="申请时间"
              prop="ackTime"
            ></el-table-column>
            <el-table-column
              width="280px"
              align="center"
              label="通过时间"
              prop="auditTime"
            ></el-table-column>

            <el-table-column align="center" label="操作" min-width="200px">
              <template slot-scope="scope">
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <!-- 编辑按钮 -->
                  <div>
                    <el-button
                      type="danger"
                      size="mini"
                      :disabled="scope.row.level == 0"
                      @click="deleteUser(scope.row)"
                    >
                      取消UP主资格
                    </el-button>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="pagination_wrapper" style="margin-top: 20px">
            <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page="currentPage"
              :page-sizes="[1, 5, 10, 20]"
              :page-size="currentPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total2"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog title="审核申请" :visible.sync="editDialogFlag" width="30%">
      <div>
        <div>
          <div>审核结果&nbsp;&nbsp;<span style="color: red">*</span></div>
          <br />
          <el-radio-group v-model="approvalResult">
            <el-radio label="1" border>通过申请</el-radio>
            <el-radio label="-1" border>拒绝申请</el-radio>
          </el-radio-group>
        </div>
        <br />
        <div>
          <div>审核意见&nbsp;&nbsp;<span style="color: red">*</span></div>
          <br />
          <el-input
            label="审核意见"
            v-model="advice"
            type="textarea"
            placeholder="请输入审核意见"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            editDialogFlag = false;
            advice = '';
            approvalResult = '';
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="uploadAdvice()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [],
      uperList: [],
      queryInfo: { username: "" },
      currentRow: "",
      currentPage: 1,
      currentPageSize: 10,
      total1: 0,
      total2: 0,
      newDialogFlag: false,
      editDialogFlag: false,
      levelChangeDialogFlag: false,
      formLabelWidth: "120",
      tableLoading: false,
      approvalResult: "",
      advice: "",
      nowRowClubInfo: { clubName: "" },
      formRules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }]
      },
      nowClubType: ""
    };
  },
  created() {
    this.getAllPublisherApplying();
    // this.getAllPublisherApplied();
  },
  methods: {
    async getAllPublisherApplying() {
      if (this.queryInfo.username != "") return this.searchPublisherApplying();
      this.tableLoading = true;
      const { data: res } = await this.$http({
        url: `/smtpmail/publisher/auditing/${this.currentPage}/${this.currentPageSize}`,
        method: "get"
      });
      console.log(res);
      if (res.code === 20000) {
        this.userList = res.data.page.records;
        this.total1 = res.data.page.total;
      }
      console.log(this.userList);
      this.tableLoading = false;
    },

    handleSizeChange1(newSize) {
      this.currentPageSize = newSize;
      this.getAllPublisherApplying();
    },

    handleCurrentChange1(newPage) {
      this.currentPage = newPage;
      this.getAllPublisherApplying();
    },

    /**
     * @description 已申请成功的Publisher
     */

    handleSizeChange2(newSize) {
      this.currentPageSize = newSize;
      this.getAllPublisherApplied();
    },

    handleCurrentChange2(newPage) {
      this.currentPage = newPage;
      this.getAllPublisherApplied();
    },

    async getNowRowInfo(row) {
      this.nowRowClubInfo = JSON.parse(JSON.stringify(row));
    },

    /**
     * @description 取消UP主资格
     */
    async deleteUser(nowRowUserInfo) {
      const confirmRes = await this.$confirm(
        "此操作将修改该用户UP主资格, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch((err) => err);
      if (confirmRes !== "confirm") {
        return this.$message.info("已取消修改");
      }
      console.log(nowRowUserInfo.username);
      const { data: res } = await this.$http({
        url: "smtpmail/publisher",
        method: "delete",
        data: [nowRowUserInfo.username]
      });
      console.log(res);
      if (res.code === 20000) {
        this.getAllPublisherApplied();
        this.$message.success("删除成功!");
      } else {
        this.$message.error("删除失败!");
      }
    },

    getNewId(evt) {
      if (!evt) return this.$message.error("请选择用户！");
      this.nowClubType = evt[0];
      this.getAllPublisherApplying();
    },

    async searchPublisherApplying() {
      if (this.queryInfo.username == "") return this.getAllPublisherApplying();
      const { data: res } = await this.$http({
        url: `/smtpmail/publisher/search/0/${this.currentPage}/${this.currentPageSize}`,
        method: "get",
        params: { username: this.queryInfo.username }
      });
      if (res.code === 20000) {
        for (let index = 0; index < res.data.page.records.length; index++) {
          const item = res.data.page.records[index];
          if (!item.ackTime) {
            let date = new Date();
            item.ackTime =
              date.getFullYear() +
              "-" +
              (date.getMonth() + 1) +
              "-" +
              date.getDate() +
              " " +
              date.getHours() +
              ":" +
              date.getMinutes() +
              ":" +
              date.getSeconds();
            console.log(item);
          }
        }
        this.userList = res.data.page.records;
        this.total = res.data.page.total;
      }
    },

    async searchPublisherApplied() {
      if (this.queryInfo.username == "") return this.getAllPublisherApplied();
      const { data: res } = await this.$http({
        url: `/smtpmail/publisher/search/1/${this.currentPage}/${this.currentPageSize}`,
        method: "get",
        params: { username: this.queryInfo.username }
      });
      if (res.code === 20000) {
        console.log(res);
        this.uperList = res.data.page.records;
        this.total2 = res.data.page.total;
      }
    },

    async uploadAdvice() {
      if (this.approvalResult == "") {
        return this.$message.error("请选择审核结果");
      }
      if (this.advice == "") {
        return this.$message.error("请填写审核意见");
      }
      console.log(this.currentRow);
      const { data: res } = await this.$http({
        url: `/smtpmail/publisher/audit/${this.approvalResult}`,
        method: "get",
        params: { username: this.currentRow.username }
      });
      console.log(res);
      if (res.code === 20000) {
        this.$message.success("审核成功");
        this.editDialogFlag = false;
        this.advice = "";
        this.approvalResult = "";
        this.getAllPublisherApplying();
      }
    },

    /**
     * @description 获取申请通过的UP主
     */
    async getAllPublisherApplied() {
      if (this.queryInfo.username != "") return this.searchPublisherApplied();
      this.tableLoading = true;
      const { data: res } = await this.$http({
        url: `/smtpmail/publisher/audited/${this.currentPage}/${this.currentPageSize}`,
        method: "get"
      });
      console.log(res);
      if (res.code === 20000) {
        this.uperList = res.data.page.records;
        this.total2 = res.data.page.total;
      }
      console.log(this.uperList);
      this.tableLoading = false;
    },

    handleTabsClick(tab) {
      console.log(tab.index);
      if (tab.index == 0) {
        this.getAllPublisherApplying();
      } else if (tab.index == 1) {
        this.getAllPublisherApplied();
      }
    }
  }
};
</script>

<style>
.el-input__suffix-inner {
  margin-right: 10px;
  font-size: 15px;
}
</style>